<script lang="ts" setup>
let { registerModel, wechatModel } = $(useModel())

const emit = defineEmits(['cancel'])

// 关闭注册框的事件
const closeRegModel = () => {
  registerModel.base = false
  wechatModel = false
  emit('cancel')
}

</script>

<template>
  <div class="reg-modal" v-if="registerModel.base">
    <div class="bg">
      <div class="content wfull flex">
        <!-- 背景图 -->
        <div class="bg-img flexc flex-col" :style="{ background: `url('images/svg/log_reg_bg.svg') no-repeat` }">
          <div absolute z-100 flexc flex-col>
            <cdn-img src="/images/logo_footer.png" w-140px h-55px />
            <div b="b white" m="t-6px b-10px" w-200px></div>
            <span text-white text-16px font-600 tracking-10px ml-8px text-center>让技术不再难学习</span>
          </div>
        </div>

        <!-- 标题 / 关闭按钮 -->
        <div pt-36px px-50px flex="~ col" w-400px relative>
          <div justify-between flex wfull>
            <span text-20px font-600 color="#404040">快速注册</span>
            <cdn-img src="/images/svg/close_icon.svg" class="cursor-pointer select-none w-20px! h-20px!"
              @click="closeRegModel" />
          </div>
          <slot />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.reg-modal {
  overflow: hidden;
}

.bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.content {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  outline: 0;
  z-index: 1200;
  width: 640px;
  height: 500px;
  margin: auto;
  border-radius: 10px;
  background-color: white;
}

.bg-img {
  width: 240px;
  height: 100%;
  position: relative;
  color: white;

  &::after {
    content: '';
    position: absolute;
    width: 240px;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(34, 34, 34, 0.66);
  }
}
</style>